<template>
  <el-dialog
    v-model="dialogVisible"
    :title="Tips"
    width="85%"
    top="2vh"
    :before-close="handleClose"
    :close-on-click-modal="false"
    custom-class="mydialog"
  >
    <div class="paper">
      <div class="title">
        <div class="titleW">
          <div class="zong">
            <span>总分</span>
            <span>{{ data.scores }}</span>
          </div>
          <div class="through" v-if="props.isTest">
            <span>通过分数</span>
            <span>{{ data.pastscores }}</span>
          </div>
          <div class="through" v-if="!props.isTest">
            <span>添加时间</span>
            <span>{{ data.addtime }}</span>
          </div>
          <div class="try" v-if="props.isTest">
            <span>考试时长</span>
            <span>{{
              data.limittime == "" ? "不限时" : data.limittime + "分钟"
            }}</span>
          </div>
          <div class="time" v-if="props.isTest">
            <span>开放时间</span>
            <span>{{
              data.begintime === null  ? "时间不限" : data.begintime + "至" + data.addtime
            }}</span>
          </div>
        </div>
        <el-button style="font-size: 12px">导出excel</el-button>
      </div>
      <div class="bankBox">
        <div class="bank" v-for="(item,index) in Parperlist" :key="item.id">
          <div class="bankTop">
            <span>{{ index+1 + "." + item.type }}</span>
            <span>分值：{{ item.scores }}</span>
          </div>
          <p class="p1" v-html="item.title"></p>
          <div class="options" v-if="item.type === '单选题'">
            <div
              :class="item.answer == items.answerno ? 'select' : 'one'"
              v-for="items in item.answers"
              :key="items.id"
            >
              <el-radio :label="items.answerno + '：'"></el-radio>
              <span>{{ items.content }}</span>
            </div>
          </div>
          <div class="options" v-if="item.type === '多选题'">
            <div
              :class="
                item.answer.split('|').includes(items.answerno)
                  ? 'select'
                  : 'one'
              "
              v-for="items in item.answers"
              :key="items.id"
            >
              <el-checkbox :label="items.answerno + '：'"></el-checkbox>
              <span>{{ items.content }}</span>
            </div>
          </div>
          <div class="options" v-if="item.type === '填空题'">
            <div class="sel">
              <span
                >正确答案
                <span style="margin-left: 8px">{{ item.answer }}</span></span
              >
            </div>
            <div class="skl">
              <span
                >答案解析：
                <span style="margin-left: 8px">{{ item.explains }}</span></span
              >
            </div>
          </div>
          <div class="options" v-if="item.type === '判断题'">
            <div class="sel">
              <span
                >正确答案
                <span style="margin-left: 8px">{{ item.answer }}</span></span
              >
            </div>
          </div>
          <div class="options" v-if="item.type === '问答题'">
            <div class="skl">
              <span
                >答案解析：
                <span style="margin-left: 8px">{{ item.explains }}</span></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch } from "vue";
// 引入封装的接口
import { getTest,Subjects } from "../../apis/test/test";
import moment from "moment";
const datas: any = reactive({
  // 控制弹出层
  dialogVisible: false,
  // 对话框标题
  Tips: "123",
  // 学生id
  id: 0,
  Parperlist: [],
  data: [],
});
const {dialogVisible, Tips, id, Parperlist, data } = toRefs(datas);
// 弹出框
const props = defineProps({
  isPar: {
    type: Boolean,
  },
  id: {
    type: Number,
  },
  title: {
    type: String,
  },
  isTest:{
    type:Boolean
  }
});
// 父传子
watch([props], () => {
  // console.log(props.isTest)
  dialogVisible.value = props.isPar;
  id.value = props.id;
  Tips.value = props.title;
  if(props.isTest){
    SubList();
  }else{
    SubjectsList()
  }
});
// 子传父
const emit = defineEmits(["isPars"]);
const handleClose = (done: () => void) => {
  done();
  emit("isPars", false);
};
// 考试单个试卷接口
const SubList = async () => {
  const res: any = await getTest(id.value);
  if (res.errCode == 10000) {
    datas.data = res.data;
    datas.Parperlist = res.data.questions;
  }
};
// 获取单条试卷
const SubjectsList = async()=>{
  const res:any = await Subjects(id.value)
   if (res.errCode == 10000) {
    datas.data = res.data;
    datas.data.addtime = moment(datas.data.addtime).format('YYYY-MM-DD HH:mm')
    datas.Parperlist = res.data.questions;
  }
}
</script>
<style scoped>
@import url("../../static/css/test/Paper.css");
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>